<template>
  <div>
    <el-collapse-transition name="el-fade-in">
      <div v-show="show">
        <el-tabs v-model="activeName" @tab-click="handleClick" style="margin: 20px 20px -10px;">
          <el-tab-pane :label="item.groupName" v-for="item in groupList" :name="item.groupCode" :key="item.groupCode"></el-tab-pane>
        </el-tabs>
      </div>
    </el-collapse-transition>
    <div style="margin-left: 20px; margin-right: 20px; margin-top: 10px">
      <search-vue ref="search" :userId="user_id" :role="role"/>
      <tableList ref="tableList" :role="role" />
    </div>
  </div>
</template>
<script>
import tableList from './table.vue'
import SearchVue from './search.vue'
import { mapGetters } from 'vuex'
import { getGroup } from '@/api/group'
  export default {
    computed: {
      ...mapGetters([
        'user_id',
        'role'
      ])
    },
    data() {
      return {
        activeName: '',
        groupList: [],
        show: true
      };
    },
    methods: {
      handleClick() {
        this.groupList.forEach(element => {
          if (element.groupCode === this.activeName) {
            this.$refs.search.clickNew(element.groupId)
            // this.$refs.tableList.selectData(element.groupId)
          }
        });
      },
      initData() {
        getGroup().then(response => {
         this.groupList = response
          this.groupList.forEach(e => {
            e.groupCode = ''+e.groupId
          })
         if (response.length>0) {
           this.activeName = response[0].groupCode
           this.handleClick(response[0])
         }
         this.show = false
        })
      },
      convertShow() {
        this.show = !this.show
      }
    },
    components: {
      tableList,
      SearchVue
    },
    mounted: function init() {
      this.initData();
    }
  };
</script>
